﻿
@{
    ViewBag.Title = "UpLoad";
}
<script src="~/Scripts/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/Upload.css" />
<
<h2>DownLoad</h2>
<h2>自定义控件</h2>
@using (Html.BeginForm("File", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{

    <div id="box">
        <input type="text" id="file_name" name="file_name" readonly="readonly" value="未选择文件" />
        <a href="javascript:void(0);" class="input">
            浏览
            <input type="file" id="file" name="document[file]">
        </a>
        <a href="javascript:void(0);" class="input">
            上传
            <input type="submit" name="sudmit" id="submit" value="上传" />
        </a>
        <br><br><br>
        <div id="t_box">
            <span id="t">值得信任的内容托管系统-8.49%的可靠性和累积2小时的无障碍运行性</span>
        </div>
    </div>
}
<p>Ajax.BeginForm方式处理上传数据</p>
@using (Ajax.BeginForm("SavePictureByForm", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post" }, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="pic" id="pic" multiple="multiple" />
    <input type="submit" value="提交" />
}
<!---JS处理前端,文件上传逻辑-->
<script type="text/javascript">
    $(function () {
        $("#file").change(function () {  // 当 id 为 file 的对象发生变化时
            var fileSize = this.files[0].size;
            var size = fileSize / 1024 / 1024;
            if (size > 5) {
                alert("附件不能大于5M,请将文件压缩后重新上传！");
                this.value = "";
                return false;
            } else {

                var arr = $("#file").val().split('\\');
                var fileName = arr[arr.length - 1];
                //   $("#file_name").val($("#file").val());  //将 #file 的值赋给 #file_name
                $("#file_name").val(fileName);  //将 #file 的值赋给 #file_name
            }
        });
        $("form").submit(function () {
            if ($("#file").val() == "" || $("#file").val() == null) {
                alert("未选择文件");
                return false;
            }
        });
    });

</script>
<!--JS处理结束-->
